<style>
  educational-banner {
    --feature-icon-bg: none;
  }

  :host-context([theme='legacy']) educational-banner [slot=illustration] {
    --holding-space-svg-color-1: var(--cros-illustration-color-1-shade-2);
    --holding-space-svg-color-2: var(--cros-illustration-color-1);
    --holding-space-svg-color-3: var(--cros-illustration-color-2);
    --holding-space-svg-color-4: var(--cros-illustration-color-5);
    --holding-space-svg-color-5: var(--cros-illustration-color-4);
  }

  :host-context([theme='refresh23']) educational-banner [slot=illustration] {
    --holding-space-svg-color-1: var(--cros-sys-illo-color1-2);
    --holding-space-svg-color-2: var(--cros-sys-illo-color1);
    --holding-space-svg-color-3: var(--cros-sys-illo-color2);
    --holding-space-svg-color-4: var(--cros-sys-illo-color5);
    --holding-space-svg-color-5: var(--cros-sys-illo-color4);
  }

  .tablet-mode-enabled {
    display: none;
  }

  :host-context(body.tablet-mode-enabled) .tablet-mode-disabled {
    display: none;
  }

  :host-context(body.tablet-mode-enabled) .tablet-mode-enabled {
    display: block;
    height: auto;
    line-height: 20px;
  }

  :host-context([theme='legacy']) .icon {
    -webkit-mask-image: url(/foreground/images/files/ui/menu_ng.svg);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background-color: var(--cros-text-color-primary);
    display: inline-block;
    height: 20px;
    vertical-align: middle;
    width: 13px;
  }

  :host-context([theme='refresh23']) .icon {
    -webkit-mask-image: url(/foreground/images/files/ui/menu_ng.svg);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background-color: var(--cros-sys-on_surface);
    display: inline-block;
    height: 20px;
    vertical-align: middle;
    width: 13px;
  }
</style>
<educational-banner>
  <svg slot="illustration">
    <use xlink:href="/foreground/images/files/ui/holding_space_welcome_image.svg#holding_space"></use>
  </svg>
  <span slot="title">$i18n{HOLDING_SPACE_WELCOME_TITLE}</span>
  <span slot="subtitle" class="tablet-mode-disabled">
    $i18n{HOLDING_SPACE_WELCOME_TEXT}
  </span>
  <span slot="subtitle" class="tablet-mode-enabled">
    $i18nRaw{HOLDING_SPACE_WELCOME_TEXT_IN_TABLET_MODE_HTML}
  </span>
</educational-banner>
